<template>
    <div class="title">Axios</div>
    <div class="inner">
      <button @click="getInfo">Axios二次封装使用get请求</button>
      <button @click="postInfo">Axios二次封装使用post请求</button>
      <button @click="getInfo1">拦截器使用get请求</button>
      <button @click="postInfo1">拦截器使用post请求</button>
      <span>{{ messageStr }}</span>
      <el-table  v-loading="loading" :data="tableData" stripe style="width: 55%">
        <el-table-column prop="id" label="ID" width="200" />
        <el-table-column prop="name" label="Name" width="200" />
        <el-table-column prop="url" label="URL" />
      </el-table>
    </div>
  </template>

<script setup>
import {ref,getCurrentInstance} from 'vue'
const {proxy}=getCurrentInstance();
let loading=ref(''),messageStr=ref('');
let tableData=ref(null);
//Axios二次封装使用get请求
function getInfo(){
    loading.value=true;
    messageStr.value='数据请求中，请等候...';
proxy.$reqFuncAxios('get','/Training/demo',{id:1,name:'netFilx'}, (jsonReqResult)=>{
         loading.value=false;
         tableData.value=jsonReqResult.JsonArrayCompanies;
         messageStr.value='数据请求完成';
  }
)}
//Axios二次封装使用post请求
function postInfo(){
    loading.value=true;
    messageStr.value='数据请求中，请等候...';
proxy.$reqFuncAxios('post','/Training/demo',{id:1,name:'netFilx'}, (jsonReqResult)=>{
         loading.value=false;
         tableData.value=jsonReqResult.JsonArrayCompanies;
         messageStr.value='数据请求完成';
  }
)}
//拦截器使用get请求
function getInfo1(){
    loading.value=true;
    messageStr.value='数据请求中，请等候...';
 const promiseReq=proxy.$HelperNewAxios.get('/Training/demo',{params:{id:1,name:'netFilx'}});
 promiseReq.then((ReqResult)=>{
    console.log(ReqResult);
    loading.value=false;
    tableData.value=ReqResult.JsonArrayCompanies;
    messageStr.value='数据请求完成';
 })
}
//拦截器使用post请求
 function postInfo1(){
    loading.value=true;
    messageStr.value='数据请求中，请等候...';
    const promiseReq=proxy.$HelperNewAxios.post('/Training/demo',{id:1,name:'netFilx'});
 promiseReq.then((ReqResult)=>{
    loading.value=false;
    tableData.value=ReqResult.JsonArrayCompanies;
    messageStr.value='数据请求完成';
 })
}
</script>

<style scoped>
body {
  margin: 0;
}
.example-showcase .el-loading-mask {
  z-index: 9;
}
button{
    display: inline-block;
    margin-right: 20px;
}
</style>